import React, { useEffect, useState, useRef } from "react";
import { configList } from './module.config'
import { Row, Col, Popover } from 'antd'
import { ReactSortable } from "react-sortablejs";
import config from './../components.config';
import './index.less'
const DropItem = (props) => {
    const { add, data, active, item, handleAdd } = props
    const { list } = data
    const { label, icon, dataIndex } = item
    return <div
        onClick={(e) => {
            console.log(123123)
            e.stopPropagation();
            handleAdd({
                selectIndex: list.length,
                active: 'components',
                list: [...list, config[dataIndex]]
            })
        }}
        className="add-component">
        <Popover placement="right" content={<img style={{ width: '80px', height: '80px' }} src={icon} />} >
            <div className="add-component_img">
                <img style={{ width: "100%", height: '100%' }} src={icon} />
            </div>
        </Popover>
        <div className="add-component_font">{label}</div>
    </div>

}
const DrawerLeft = (props) => {
    const { add, data } = props
    const { list } = data
    const [active, setActive] = useState({})
    useEffect(() => {
        setActive(configList[0])
    }, [])
    const handleAdd = (data) => {
        add(data)
    }
    return <div className="drawerLeft_box">
        <div className="drawerLeft_box_label">
            {configList.map((item, index) => {
                const { icon: IconComponents, label, value } = item
                return <div onClick={() => {
                    if (active.value !== value) {
                        setActive(item)
                    }
                }} className={active.value === value ? 'drawerLeft_label_Select' : 'drawerLeft_label_noSelect'} key={index}>
                    <div className="drawerLeft_label-icon">
                        {IconComponents}
                    </div>
                    <div className="classify-title">{label}</div>
                </div>
            })}
        </div>
        {(active && active.children) && <div>
            <div className="add-component-lists">
                <ReactSortable
                    list={active.children}
                    animation={200}
                    group={{
                        name: "sort-field",
                        pull: "clone",
                        put: false,
                    }}
                    options={{
                        filter: '.no-sort',
                        delay: 600,
                        touchStartThreshold: 10
                    }}
                    setList={() => { }}
                    sort={false}
                    style={{
                        overflow: "auto",
                        display: 'flex',
                        flexWrap: 'wrap',
                        justifyContent: 'space-between'
                    }}
                // forceFallback={true}
                >
                    {active.children.map((item, key) => {
                        const { label, icon, dataIndex } = item
                        return <div span={12} key={key} className="sort-item">
                            <DropItem handleAdd={handleAdd} item={item} active={active} {...props}></DropItem>
                        </div>
                    })}
                </ReactSortable>
            </div>
        </div>}
    </div>
}
export default DrawerLeft